<template>


  <div class="table">
    <div class="crumbs">
      歌曲信息
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" size="mini" @click="delAll">批量删除</el-button>
        <el-input v-model="select_word" size="mini" placeholder="请输入歌手名字" class="handle-input"></el-input>
        <el-button type="primary" size="mini" @click="centerDialogVisible=true">添加歌曲</el-button>
      </div>
    </div>
    <el-table size="mini" border style="width: 100%" height="500px" :data="data" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="40"  ></el-table-column>
      <el-table-column label="歌曲图片" width="110" align="center">
        <template slot-scope="scope"><!--scope当前的单元格-->
          <div class="singer-img">
            <img :src="getUrl(scope.row.pic)" style="width:100%"   alt=""/>
          </div>
          <div class="play" @click="setSongUrl(scope.row.url,scope.row.name)">
            <div v-if="toggle==scope.row.name">
            <svg class="icon">
              <use xlink:href="#icon-zanting"></use>
            </svg>
            </div>

            <div v-if="toggle!=scope.row.name">
              <svg class="icon">
                <use xlink:href="#icon-bofanganniu"></use>
              </svg>
            </div>
          </div>
         <!-- <el-upload :action="uploadUrl(scope.row.id)" :before-upload="beforeAvatorUpload"  :on-success="handleAvatorSuccess">
            <el-button size="mini">更新图片</el-button>

          </el-upload>-->
        </template>
      </el-table-column>

      <el-table-column prop="name" label="歌曲名字" width="120px" align="center">

      </el-table-column>


      <el-table-column prop="introduction" label="歌曲专辑"  width="120px" align="center">

      </el-table-column>

      <el-table-column prop="lyric" label="歌词"  width="120px" align="center">

      </el-table-column>
      <!--<el-table-column  label="歌词"    align="center">
        <template slot-scope="scope">&lt;!&ndash;scope当前的单元格&ndash;&gt;
         {{lyric}}
        </template>
      </el-table-column>-->
      <el-table-column label="资源更新" align="center">
        <template slot-scope="scope">
          <el-upload :action="uploadUrl(scope.row.id)" :before-upload="beforeAvatorUpload"  :on-success="handleAvatorSuccess">
            <el-button size="mini">更新图片</el-button>

          </el-upload>

          <el-upload :action="uploadSongUrl(scope.row.id)" :before-upload="beforeSongUpload"  :on-success="handleSongSuccess">
            <el-button size="mini">更新歌曲</el-button>

          </el-upload>
        </template>

      </el-table-column>
      <el-table-column  label="操作"  width="150px" align="center">
        <template slot-scope="scope"><!--scope当前的单元格-->
          <el-button size="mini" @click="handlEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="handldelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        background
        layout="total,prev,pager,next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <el-dialog title="添加歌曲" :visible.sync="centerDialogVisible" width="400px" center>
      <el-form :model="registerForm" ref="registerForm" label-width="80px"  id="tf">

        <div >
         <!-- <el-form-item prop="introduction" lable="专辑" size="mini">
            <el-input v-model="registerForm.introduction" placeholder="专辑"></el-input>
          </el-form-item>
          <el-form-item prop="name" lable="歌名" size="mini">
            <el-input v-model="registerForm.name" placeholder="歌名"></el-input>
          </el-form-item>
          <el-form-item prop="lyric" lable="歌词" size="mini">
            <el-input v-model="registerForm.lyric" placeholder="歌词"></el-input>
          </el-form-item>-->
          <label>歌名</label>
          <input type="text" name="name"></input>
        </div>
        <div>
          <label>专辑</label>
          <input type="text" name="introduction"></input>
        </div>


         <!-- <label>歌词</label>
          <el-input type="textarea" name="lyric"></el-input>
        </div>-->
        <div>
          <label>歌曲上传</label>
          <input type="file" name="file"></input>

        </div>

        <el-form-item prop="lyric" lable="歌词" size="mini">
          <el-input   name="lyric" v-model="registerForm.lyric" placeholder="歌词"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="mini" @click="centerDialogVisible=false" >取消</el-button>
      <el-button type="primary" size="mini" @click="addSong" >确定</el-button>
    </el-dialog>

    <el-dialog title="编辑歌曲" :visible.sync="editVisible" width="400px" center>
      <el-form :model="editForm" ref="editForm" label-width="80px">
        <el-form-item prop="name" lable="歌手-歌名" size="mini">
          <el-input v-model="editForm.name" placeholder="歌手-歌名"></el-input>
        </el-form-item>

        <el-form-item prop="introduction" lable="专辑" size="mini">
          <el-input v-model="editForm.introduction" placeholder="专辑" style="height: 100px;overflow: scroll" type="textarea" ></el-input>
        </el-form-item>

        <el-form-item prop="lyric" lable="歌词" size="mini">
          <el-input v-model="editForm.lyric" placeholder="歌词" style="height: 100px;overflow: scroll" type="textarea" ></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="mini" @click="editVisible=false" >取消</el-button>
      <el-button type="primary" size="mini" @click="edit1Singer" >确定</el-button>
    </el-dialog>
    <el-dialog title="删除歌手" :visible.sync="deleteVisible" width="400px" center>
       <div align="center">数据删除将不能恢复！确认删除?</div>
      <slot slot="footer">
      <el-button type="primary" size="mini" @click="deleteVisible=false" >取消</el-button>
      <el-button type="danger" size="mini" @click="delete1Singer" >确定</el-button>
      </slot>
    </el-dialog>

  </div>
</template>


<script>
import {songOfSingerId} from '../api/index';

import {mixin} from "../mixins";
import {deleteSinger, deleteSong, editSinger, editSong} from "../api";
import {mapGetters} from 'vuex' ;
import '@/assets/js/iconfont.js'
export default {

  mixins:[mixin],
  data(){
    return{
      singerId:'',//
      singerName: '',
      centerDialogVisible:false,
      editVisible:false,
      deleteVisible:false,//删除弹框
      registerForm:{//添加框
        name:'',
        singerName:'',
        introduction:'',
        lyric:''
      },
      editForm:{//编辑框
        id:'',
        name:'',
        lyric:'',
        introduction:''
      },
      tableData: [],
      select_word:'',
      tempData:[],
      gridIndex:-1,
      pageSize:5,//分页大小
      currentPage:1,//当前页,
      multipleSelection:[],//打钩的项多选,
      toggle:false,//播放器的显示图标状态
    }
  },

computed:{
  ...mapGetters([

    'isPlay'
  ]),
  data(){
    return this.tableData.slice((this.currentPage-1) * this.pageSize,this.currentPage*this.pageSize)
  }
}  ,
  watch:{
    select_word:function () {
      if(this.select_word===''){
        this.tableData=this.tempData;
      }else {
        this.tableData=[];
        for (let item of this.tempData){
          if(item.name.includes(this.select_word)){
            this.tableData.push(item)

          }
        }
      }
    }
  },
  created() {
    this.singerId=this.$route.query.id;
    this.singerName=this.$route.query.name;
    this.getData();
  },
  destroyed() {
    this.$store.commit('setIsPlay',false)
  },
  methods:{
    handleSelectionChange(val){
      this.multipleSelection=val;
    },

    handleCurrentChange(val){
      this.currentPage=val;
    },
    getData(){
      this.tableData=[];
      this.tempData=[];

       songOfSingerId(this.singerId).then(res=>{
         this.tableData=res;
        this.tempData=res;
         this.currentPage=1;
         console.log(res)
       })
    },
    addSong(){
    let _this=this;
    var form=new FormData(document.getElementById('tf'));
    form.append('singerId',this.singerId);
    form.set('name',this.singerName+'-'+form.get('name'));
    if(!form.get('lyric')){
      form.set('lyric','[00:00:00]暂无歌词');
    }else{
      form.set('lyric',_this.registerForm.lyric);
    }

    var req=new XMLHttpRequest();
    req.onreadystatechange=function (){
      if (req.readyState==4&&req.status==200){
        let res=JSON.parse(req.response);
        if(res.code){
          _this.getData();
          _this.registerForm={};
          _this.notify(res.msg,'success');
        }else {
          _this.notify('保存失败','error')
        }
      }
    }
       req.open('post',`${_this.$store.state.HOST}/song/add`,false);
       req.send(form);
      this.centerDialogVisible=false;
    },
    edit1Singer(){

      let params=new URLSearchParams();
      params.append('id',this.editForm.id);
      params.append('name',this.editForm.name);

      params.append('lyric',this.editForm.lyric);
      params.append('introduction',this.editForm.introduction);
      editSong(params).then(res=>{
        this.getData();
        if(res.code==1){
          this.notify("修改成功","success");
        }else{
          this.notify("修改失败","error");
        }
      }).catch(err=>{
        console.log(err);
      });
      this.editVisible=false;
    },
    //删除用户
    delete1Singer(){
      deleteSong(this.gridIndex).then(res=>{
        this.getData();
        if(res){
          this.notify("删除成功","success");
        }else{
          this.notify("删除失败","error");
        }
      }).catch(err=>{
        console.log(err);
      });
      this.deleteVisible=false;

    },

    delAll(){
      for(let item of this.multipleSelection){
        this.handldelete(item.id);
        this.delete1Singer();
      }

      this.multipleSelection=[];
    },
    //更新图片
    uploadUrl(id){
      return `${this.$store.state.HOST}/song/updataPic?id=${id}`
    },
    handlEdit(row){
       this.editVisible=true;
        this.editForm={
          id:row.id,
          name:row.name,
          lyric: row.lyric,
          introduction:row.introduction
      }

    },
    //上传之前做一些检验
    beforeSongUpload(file){
      var testMsg=file.name.substring(file.name.lastIndexOf('.')+1);

      if(testMsg!='mp3'){

        this.$message.error('上传文件只能mp3格式');
        return false;
      }



      return true;
    }
    ,
    //上传歌曲成功之后
    handleSongSuccess(res){
      let _this=this;
      if(res.code===1){
        _this.getData();
        _this.$notify({
          title:'上传成功',
          type:'success'
        });
      }else {
        _this.$notify({
          title:'上传失败',
          type:'error'
        });
      }
    },


    //更新图片
    uploadSongUrl(id){
      return `${this.$store.state.HOST}/song/updateSongUrl?id=${id}`
    },
    //播放状态切换
    setSongUrl(url,name){
      this.toggle=name;
      this.$store.commit('setUrl',this.$store.state.HOST+'/song/'+url);
      if(this.isPlay){
        this.$store.commit('setIsPlay',false);


      }else {
        this.$store.commit('setIsPlay',true);
      }
    },


  }
}
</script>

<style scoped>
.handle-box{
  margin-bottom: 20px;
}
.singer-img{
  width: 100%;
  height: 80px;
  border-radius: 5px;
  margin-bottom: 5px;
  overflow: hidden;
}

.pagination{
  display: flex;
  justify-content: center;
}
.handle-input{
  width: 300px;
  display: inline-block;
}

.play{
  position: absolute;
  z-index: 100;
  width: 80px;
  height: 80px;
  display: flex;
  align-content: center;
  justify-content: center;
  cursor: pointer;
  top: 18px;
  left: 15px;
}
.icon{
  width: 2em;
  height: 2em;
  color: white;
  fill: currentColor;
  overflow: hidden;
}
</style>
